html, body{height: 100%; margin: 0px; padding: 0px; border: none; overflow: hidden;}
div{margin: 0px; padding: 0px;}
iframe{width: 100%; height: 100%;}

div.full-panel{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
div.fill-panel{position: absolute; top: 0px; bottom: 0px; left: 0px; width: 100%; overflow: hidden;}
div.fill-panel:hover{overflow: auto;}
div.left-panel{position: absolute; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 73px; height: 100%; background-color: #f8f8f8; border-right: 1px solid #ececec; z-index: 999;}
div.logo{padding: 12px 12px 14px 17px;}
div.start-menu{padding: 12px 12px 24px 17px;}
div.start-menu div.slot{position: relative; height: 36px; padding: 6px 0px;}
div.start-menu div.slot span.icon{
    width: 36px;
    height: 36px;
    transition: opacity 0.25s ease-in-out;
    opacity: 1;
    filter: alpha(opacity=100);
    display: inline-block;
    cursor: pointer;
}

div.start-menu div.slot span.i1{
    background: transparent url() no-repeat scroll 0px 0px;
}
div.start-menu div.slot span.i1:hover{
    background-image: url();
}

div.start-menu div.slot span.i2{
    background: transparent url() no-repeat scroll 0px 0px;
}
div.start-menu div.slot span.i2:hover{
    background-image: url();
}

div.start-menu span.i3{
    background: transparent url() no-repeat scroll 0px 0px;
}
div.start-menu div.slot span.i3:hover{
    background-image: url();
}

div.start-menu div.slot span.i4{
    background: transparent url() no-repeat scroll 0px 0px;
}
div.start-menu div.slot span.i4:hover{
    background-image: url();
}

div.start-menu div.slot span.i5{
    background: transparent url() no-repeat scroll 0px 0px;
}
div.start-menu div.slot span.i5:hover{
    background-image: url();
}

div.start-menu div.slot span.i6{
    background: transparent url() no-repeat scroll 0px 0px;
}
div.start-menu div.slot span.i6:hover{
    background-image: url();
}

div.start-menu div.slot span.i7{
    background: transparent url() no-repeat scroll 0px 0px;
}
div.start-menu div.slot span.i7:hover{
    background-image: url();
}

div.start-menu div.slot span.i8{
    background: transparent url() no-repeat scroll 0px 0px;
}
div.start-menu div.slot span.i8:hover{
    background-image: url();
}

div.start-menu div.slot div.tooltip{
    display: block;
    position: absolute;
    top: 15px;
    left: 42px;
    height: 15px;
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
}

div.start-menu div.slot div.tooltip img{
    width: 4px;
    height: 8px;
    position: absolute;
    top: 5px;
    left: -4px;
}

div.start-menu div.slot div.tooltip span.text{
    white-space: nowrap;
    padding: 4px 7px;
    background: #606060;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    color: #d9d9d9;
    cursor: default;
    display: inline-block;
}
div.start-menu div.slot:hover div.tooltip{opacity: 1; filter: alpha(opacity=1); visibility: visible;}
div.avatar-box{position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 17px; border-top: 1px solid #e1e1e1; background-color: #f8f8f8;}
div.avatar-box img{width: 36px; height: 36px; border-radius: 18px;}

/* tree */
div.tree-panel{position: absolute; top: 0px; left: 74px; width: 350px; height: 100%; background-color: #ffffff;}
div.tree-panel div.tree-panel-body{margin: 0px; padding: 0px; height: 100%; border-right: 1px solid #ececec; box-sizing: border-box;}
div.tree-panel div.tree-panel-body div.search{margin: 0px; height: 60px; border-bottom: 4px solid #ececec; background-color: #ffffff;}
div.tree-panel div.tree-panel-body div.search div.search-body{padding: 16px 10px 10px 10px;}

div.search-box{
    margin: 0px;
    padding: 2px 0px 2px 20px;
    border: 1px solid #efefef;
    box-sizing: border-box;
    border-radius: 20px;
}

div.search-box input.keyword{
    width: 272px;
    height: 22px;
    margin: 0px;
    padding: 0px;
    background-color: #ffffff;
    border: none;
    outline: none;
    font-size: 12px;
}

div.search-box input.keyword::-webkit-input-placeholder {color: #999999;}
div.search-box input.keyword:-moz-placeholder {color: #999999;}
div.search-box input.keyword::-moz-placeholder {color: #999999;}
div.search-box input.keyword:-ms-input-placeholder {color: #999999;}
div.search-box span.button{
    float: right;
    margin: 4px 8px 0px 0px;
    padding: 0px;
    height: 18px;
    width: 18px;
    background: transparent url(../images/search.gif) no-repeat 0px 0px;
    display: inline-block;
    cursor: pointer;
}

/* main-panel */
div.main-panel{margin-left: 424px; height: 100%;}
div.slider-mask{position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.75); z-index: 990; display: none;}
div.slider-panel{position: absolute; top: 0px; left: 0px; width: 456px; height: 100%; margin-left: -456px; border-right: 4px solid #ececec; background-color: #ffffff; color: #555555; z-index: 998;}
div.slider-panel div.panel-title{margin: 0px; height: 60px; border-bottom: 4px solid #ececec; background-color: #ffffff;}
div.slider-panel div.panel-title h3{margin: 0px; padding: 14px 0px 10px 10px; font-size: 24px; color: #888888;}
div.slider-panel div.panel-content{position: absolute; top: 64px; bottom: 0px; left: 0px; width: 100%; overflow: auto;}

/* dialog */
div.widget-mask{position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1001; display: none;}
div.dialog {
    top: 50%;
    left: 50%;
    position: absolute;
    border: 1px solid #e0e1e5;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    opacity: 0.99;
}

div.dialog div.title{
    clear: both;
    height: 28px;
    padding: 4px 0px 0px 6px;
    border-bottom: 1px solid #cdcdcd;
    background-color: #ffffff;
    cursor: default;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}
div.dialog div.title h4 {
    float: left;
    margin: 6px 0px 2px 0px;
    padding: 0px 0px 2px 10px;
    text-align: left;
    font-size: 12px;
    color: #333333;
}

div.dialog div.title span.min {
    float: right;
    margin-top: 2px;
    margin-right: 4px;
    width: 20px;
    height: 20px;
    background: transparent url(?action=res&path=/finder/images/min.gif) no-repeat 0px 0px;
    display: inline-block;
}

div.dialog div.title span.max {
    float: right;
    margin-top: 2px;
    margin-right: 4px;
    width: 20px;
    height: 20px;
    background: transparent url(?action=res&path=/finder/images/max.gif) no-repeat 0px 0px;
    display: inline-block;
}

div.dialog div.title span.close {
    float: right;
    margin-top: 2px;
    margin-right: 4px;
    width: 20px;
    height: 20px;
    background: transparent url(?action=res&path=/finder/images/close.gif) no-repeat 0px 0px;
    display: inline-block;
}

div.dialog div.title span.min:hover {background: transparent url(?action=res&path=/finder/images/min.gif) no-repeat 0px -20px;}
div.dialog div.title span.max:hover {background: transparent url(?action=res&path=/finder/images/max.gif) no-repeat 0px -20px;}
div.dialog div.title span.close:hover {background: transparent url(?action=res&path=/finder/images/close.gif) no-repeat 0px -20px;}
div.dialog div.title h4 a{color: #666666;}
div.dialog div.title h4 span.label {font-size: 12px; font-weight: normal;}
div.dialog div.title h4 span.label strong {font-weight: bold; color: #ff6a00;}
div.dialog div.dialog-body{margin: 10px; padding: 0px 0px 0px 0px; border: 1px solid #e0e1e5; border-radius: 3px;}
/* dialog */

div.list-item{padding: 12px 0px 0px 0px; height: 24px; transition: height 0.2s ease-in-out; font-size: 13px; cursor: default;}
div.list-item span.file{
    float: left;
    height: 16px;
    width: 16px;
    background: transparent url() no-repeat scroll 0px 0px;
    background-size: 16px 16px;
    margin: 0px 2px 0px 33px;
    vertical-align: middle;
    overflow: hidden;
    display: inline-block;
}

div.list-item div.text{
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
    line-height: normal;
    margin-top: -2px;
    transition: color 0.1s ease-in-out;
    color: #4a4a4a;
    cursor: pointer;
}

div.list-item span.delete{
    float: right;
    width: 24px;
    height: 24px;
    margin-top: -4px;
    margin-right: 10px;
    background: transparent url() no-repeat scroll 0px 0px;
}

div.list-item:hover{background-color: #42c470;}
div.list-item:hover span.file{background: transparent url() no-repeat scroll 0px 0px;}
div.list-item:hover div.text{color: #ffffff;}

div.note-item{padding: 10px 0px 0px 20px; height: 120px; border-bottom: 1px solid #ececec; transition: height 0.2s ease-in-out; font-size: 13px; color: #666666; cursor: default;}
div.note-item:hover{border-bottom: 1px solid #42c470; background-color: #42c470; color: #ffffff;}
div.note-item div.title{float: left; width: 300px; height: 18px; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
div.note-item div.summary{float: left; width: 300px; height: 82px; font-size: 12px; overflow: hidden;}
div.note-item div.date{float: left; width: 300px; height: 20px; text-overflow: ellipsis; text-align: right; white-space: nowrap; color: #c0c0c0; overflow: hidden;}
div.note-item div.image{float: right; width: 96px; height: 96px;}
div.note-item div.image img{max-width: 96px; max-height: 96px;}
div.note-item:hover div.image img{opacity: 0.3;}

div.book-item{padding: 10px 0px 0px 20px; height: 80px; border-bottom: 1px solid #ececec; transition: height 0.2s ease-in-out; font-size: 13px; color: #666666; cursor: default;}
div.book-item:hover{border-bottom: 1px solid #42c470; background-color: #42c470; color: #ffffff;}
div.book-item div.date{float: left; width: 300px; height: 20px; text-overflow: ellipsis; white-space: nowrap; color: #c0c0c0; overflow: hidden;}
div.book-item div.title{float: left; width: 300px; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
div.book-item div.image{float: right; width: 60px; height: 60px;}
div.book-item div.image img{max-width: 60px; max-height: 60px; border-radius: 6px; display: block;}
div.book-item:hover div.image img{opacity: 0.3;}

div.button{margin: 20px 0px; text-align: right;}
div.button button.button, div.form button.action{
    margin-right: 10px;
    padding: 8px 32px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    color: #999999;
    text-decoration: none;
    border-radius: 4px;
    -webkit-user-select: none;
    outline: none;
}
div.button button.button:hover{border: 1px solid #d9d9d9; background-color: #d9d9d9;}
div.button button.action{border: 1px solid #2dbe60; background-color: #2dbe60; color: #ffffff;}
div.button button.action:hover {border: 1px solid #28a955; background-color: #28a955; color: #ffffff;}

div.button button.ensure {}
div.button button.ensure {border: 1px solid #2dbe60; background-color: #2dbe60; color: #ffffff;}
div.button button.ensure:hover {border: 1px solid #28a955; background-color: #28a955; color: #ffffff;}

div.button button.submit {}
div.button button.submit {border: 1px solid #d73104; background-color: #d73104; color: #ffffff;}
div.button button.submit:hover {border: 1px solid #28a955; background-color: #28a955; color: #ffffff;}
div.button button.button.disabled{background-color: #e8e8e8; color: #888888; cursor: default;}

iframe.category-iframe{width: 100%; height: 360px; overflow: hidden;}

/* #9cb8e1 #a6caf0 */
div.contextmenu{top: 100px; left: 100px; display: none; position: absolute; z-index: 9999;}
div.contextmenu ul.menu{
    margin: 0px;
    padding: 0px;
    width: 244px;
    border: 1px solid #979797;
    background: url(../images/menu-item.gif) repeat-y scroll 0px 0px transparent;
    list-style: none;
    overflow: hidden;
    -webkit-box-shadow: 4px 4px 4px #bdcfec;
    -moz-box-shadow: 4px 4px 4px #bdcfec;
    box-shadow: 4px 4px 4px #dddddd;
}
div.contextmenu ul.menu li.item{
    margin: 2px;
    width: 240px;
    height: 26px;
    line-height: 26px;
    border: 0px solid #aecff7;
    background-color: transparent;
    font-size: 12px;
    font-weight: normal;
    text-align: left;
    letter-spacing: 1px;
    color: #000000;
    cursor: default;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}
div.contextmenu ul.menu li.disabled{color: #6d6d6d;}
div.contextmenu ul.menu li.disabled img{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
div.contextmenu ul.menu li.separator {
    margin: 1px 0px 1px 36px;
    padding: 0px;
    width: 204px;
    height: 0px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #ffffff;
}
div.contextmenu ul.menu li.item:hover{background: url(../images/item-over.gif) repeat-y scroll 0px 0px transparent;}
div.contextmenu ul.menu li.selected{background: url(../images/item-over.gif) repeat-y scroll 0px 0px transparent;}
div.contextmenu ul.menu li.disabled:hover{background: none;}
div.contextmenu ul.menu li.item span.icon{
    float: left;
    padding-left: 8px;
    width: 32px;
    height: 26px;
    line-height: 24px;
    text-align: left;
    display: inline-block;
}
div.contextmenu ul.menu li.item span.icon img{border: none; vertical-align: middle;}
div.contextmenu ul.menu li.item a.command{
    padding: 0px;
    height: 26px;
    line-height: 26px;
    cursor: default;
}
div.contextmenu ul.menu li.item a{text-decoration: none; color: #000000;}
div.contextmenu ul.menu li.disabled a{text-decoration: none; color: #6d6d6d;}
/* contextmenu */

